<template>
	<div class="mobile_search">
		<div class="header">
			<button @click="go(-1)">
				<i class="el-icon-arrow-left"></i>
			</button>

			<form @submit.prevent="setSearch()">
				<input type="search" placeholder="请输入书名,作者,出版社" v-model="keywords" />
				<input type="submit" value="搜索" />
			</form>
		</div>

		<div class="ss" v-if="hlist != ''">
			<h4>历史搜索</h4>
			<button>
				<i class="el-icon-delete-solid" v-show="sc == 'pic'" @click="sc = 'wz'"></i>
				<el-button type="text" @click="open" v-show="sc == 'wz'">全部删除</el-button>
				<span v-show="sc == 'wz'">|</span>
				<span v-show="sc == 'wz'" style="color: red;" @click="sc = 'pic'">完成</span>
			</button>
		</div>

		<div class="history">
			<button v-for="(item,i) in hlist" :key="i">
				<span>
					{{item}}
					<span v-show="sc == 'wz'" @click="removeOne(i)">x</span>
				</span>
			</button>
		</div>
		
		<div class="jg">
			<ul>
				<li v-for="item in books">
					<router-link :to="`/mobile/bookdetail/${item.id}`">
						<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`"/>
						<span style="margin-right: 10rem;">{{item.name}}</span> 
						<div class="body">
							<span>{{item.author}}</span>
							<span>{{item.maker}}</span>
							<span>￥{{item.price}}</span>
							<el-button type="primary" icon="el-icon-shopping-cart-1">购买</el-button>
						</div>
						<span>{{item.info}}</span>
						
					</router-link>
				</li>
			</ul>
		</div>
		
		<div class="bd">
			<div class="re">
				<header>
					<h3>热门榜单</h3>
				</header>
				<ul>
					<li v-for="(item,index) in FilterList" :key="item.id">
						<router-link :to="`/mobile/bookdetail/${item.id}`" v-if="index < 10">
							<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" v-if="index < 3" />
							<span class="xh">{{index+1}}</span>
							<span class="xh" v-if="index >= 3"
								style="background-color: rgba(212, 212, 212, 1.0);">{{index+1}}</span>
							<span>{{item.name}}</span>
							<h5>热度:<span>{{item.salenum}}</span></h5>
						</router-link>
					</li>
				</ul>
			</div>
			<div class="re">
				<header>
					<h3>新书榜单</h3>
				</header>
				<ul>
					<li v-for="(item,index) in FilterList2" :key="item.id">
						<router-link :to="`/mobile/bookdetail/${item.id}`" v-if="index < 10">
							<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" v-if="index < 3" />
							<span class="xh">{{index+1}}</span>
							<span class="xh" v-if="index >= 3"
								style="background-color: rgba(212, 212, 212, 1.0);">{{index+1}}</span>
							<span>{{item.name}}</span>
							<h5>新书:<span>￥{{item.price}}</span></h5>
						</router-link>
					</li>
				</ul>
			</div>

		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	import qs from 'qs';
	export default {
		name: 'MobileSearch',
		data() {
			return {
				keywords: '',
				sc: 'pic',
				newlist: [],
				books : []
			}
		},
		computed: {
			...mapState('search', ['hlist']),
			FilterList() {
				let filters = this.newlist;
				filters.sort((a1, a2) => {
					return a2.salenum - a1.salenum
				})
				return filters;
			},
			FilterList2() {
				let filters = this.newlist;
				filters.sort((a1, a2) => {
					return a2.id - a1.id
				})
				return filters;
			}
		},
		methods: {
			// 格式：mapActions('模块名'，['调用模块内的方法'])
			...mapActions('search', ['actionHistory']),

			setSearch() {
				// 调用search模块的函数actionHistory，并将当前组件的data数据传递过去vuex
				this.actionHistory(this.keywords);
				let fd = new FormData();
				fd.append('key',this.keywords);
				console.log(fd);
				this.$postk('/api/public/book/findPageKey/1/6',fd).then((resp)=>{
					console.log(resp.data.data.books);
					this.books = resp.data.data.books;
				})
				this.keywords = '';
			},
			...mapActions('search', ['removeOneHistory']),
			removeOne(x) {
				this.removeOneHistory(x);
			},
			...mapActions('search', ['removeHistory']),
			open() {
				this.$confirm('此操作将删除全部历史记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.removeHistory();
					this.sc = 'pic'
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			go(i){
				this.$router.go(i);
			},
		},
		created() {
			this.$get('/api/public/findPageBook/1/20/0').then((rep)=>{
				this.newlist = rep.data.data.books;
			})
		}
	}
</script>

<style scoped>
	/deep/ .el-button--primary{
		height: 2rem;
		width: 4rem;
		margin-top: 0.6rem;
		margin-right: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ff4e00;
		border: none;
	}
	
	.mobile_search .jg {
		margin-left: 0.5rem;
	}
	
	.mobile_search .jg ul {
		margin: 0 auto 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	
	}
	
	.mobile_search .jg ul li {
		overflow: hidden;
		margin-left: 0.6rem;
		margin-top: 1rem;
		margin-bottom: 1rem;
		background-color: white;
		text-align: center;
		position: relative;
		vertical-align: middle;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.mobile_search .jg ul li img {
		float: left;
		height: 6rem;
		margin-top: 1rem;
		vertical-align: middle;
	}
	
	.mobile_search .jg .body{
		margin-top: 1rem;
		margin-bottom: 2rem;
		display: flex;
		justify-content: space-between;
	}
	
	
	
	.mobile_search .jg ul li span {
		color: #a67b5b;
		font-size: 0.8rem;
	}
	.mobile_search .header {
		background-color: #f5d5a0;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 4rem;
	}

.mobile_search .header button{
		border: none;
		background-color: #f5d5a0;
		position: absolute;
		top: 1;
		left: 0;
	}

	.mobile_search .header form input[type='search'] {
		width: 14rem;
		height: 2rem;
		border-radius: 3rem;
		text-indent: 0.5rem;
		outline: none;
		border: none;
		caret-color: #f5d5a0;
		margin-left: 2rem;
	}

	.mobile_search .header form input[type='submit'] {
		border: none;
		background-color: #f5d5a0;
		font-size: 1rem;
		margin-left: 2rem;
	}

	.mobile_search .history {
		height: 9rem;
		overflow-y: scroll;
	}

	.mobile_search .ss {
		display: flex;
		justify-content: space-between;
	}

	.mobile_search .ss h4 {
		margin-top: 0.5rem;
		margin-left: 1rem;
		margin-bottom: 0.5rem;
	}

	.mobile_search .ss button {
		border: none;
		background-color: white;
		margin-right: 1rem;
	}

	.mobile_search .ss button span {
		margin-left: 0.5rem;
	}

	.mobile_search .history button {
		margin-left: 2rem;
		border-radius: 5rem;
		border: 1px solid silver;
		margin-bottom: 0.5rem;
	}

	.mobile_search .bd {
		display: flex;
	}

	.mobile_search .bd .re {
		margin-left: 0.5rem;
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
		border: 1px solid #f5d5a0;
		width: 55%;

	}

	.mobile_search .bd .re header {
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
		background: linear-gradient(135deg, #ff9a9e, #fad0c4);
	}

	.mobile_search .bd .re header h3 {
		margin-left: 1rem;
	}

	.mobile_search .bd .re ul {
		width: 98%;
		margin: 0 auto 1.5rem;
		display: flex;
		
		flex-wrap: wrap;

	}

	.mobile_search .bd .re ul li {
		width: 100%;
		overflow: hidden;
		margin-left: 0.6rem;
		margin-bottom: 1rem;
		background-color: white;
		text-align: center;
		position: relative;
		vertical-align: middle;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mobile_search .bd .re ul li img {
		width: 40%;
		height: 6rem;
		margin-top: 1rem;
		vertical-align: middle;
	}

	.mobile_search .bd .re ul li span {
		color: #a67b5b;
		font-size: 0.8rem;
	}

	.mobile_search .bd .re ul li .xh {
		font-size: 0.7rem;
		background-color: rgba(236, 184, 120, 1.0);
		position: absolute;
		top: 10%;
		left: 0;
		color: white;
		padding: 0.4rem 0.3rem;
		border-radius: 0 0 0.6rem 0.6rem;
	}

	.mobile_search .bd .re ul li h5 {
		color: #a67b5b;
	}

	.mobile_search .bd .re ul li h5 span {
		color: red;
	}
</style>